<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>请假管理</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/icon.css">
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery-1.8.0.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="<%=path%>/js/post.js"></script>
<script type="text/javascript" src="<%=path%>/js/util.js"></script>
<script type="text/javascript">
	var path = '${pageContext.request.contextPath}';
	
	function uploadData(){
		var form= $('#formUpload');
		var url= path + '/leave/import/';
		$.messager.progress();	
		form.form('submit', {
			url: url,
			success: function(d){
				$.messager.progress('close');
				$('#dlgUpload').dialog('close');
				
				showImport($.parseJSON(d));
			},
			error : function() {
				$.messager.progress('close');
				$.messager.alert('错误', '无法处理！', 'error');
			}
		});
	}
	
	function showImport(d){
		var grid=$('#gridImport');
		grid.datagrid('loadData', d);
		$('#dlgImport').dialog('open');
	}
	
	function showUpload(){
		var form=$('#formUpload');
		form.form('clear');
		$('#dlgUpload').dialog('open');
	}
	
	function saveAll(){
		var grid=$('#gridImport');
		var data = grid.datagrid('getData');
		if (!data || !data.rows || data.rows.length<1) {
			return;
		}
		
		if (!data.footer || data.footer.length < 1 || !data.footer[0].reason) {
			saveAllData(grid, data);
		}
		else{
			$.messager.confirm('询问', '文件中有错误数据，确定要导入这些记录吗?', function(r) {
				if (!r) {
					return;
				}
				saveAllData(grid, data);
			});
		}
	}
	
	function saveAllData(grid, data){
		var url = path + '/leave/saveAll/';	
		var json = JSON.stringify(data.rows);
		
		$.messager.progress({
			title : '系统提示',
			msg : '处理中，请稍候...'
		});
	
		$.ajax({
			type : "POST",
			url : url,
			data : 'json=' + json,
			success : function(data) {
	
				$.messager.progress('close');
	
				if (data.isSucess) {
	
					$('#dlgImport').dialog('close');
					$.messager.show({
						title : '系统提示',
						msg : '处理成功！',
						timeout : 2000,
						showType : 'slide'
					});
	
					$('#grid').datagrid('load');
				} else {
					$.messager.alert('错误', data.message, 'error');
				}
			},
			error : function() {
				$.messager.progress('close');
				$.messager.alert('错误', '无法处理！', 'error');
			}
		});
	}

	function onLoadSuccessTree(row, data) {
		var tree = $('#tree');
		var root = tree.treegrid('getRoot');
		if (!root) {
			return;
		}
		tree.treegrid('select',root.id);
		loadEmployeeGird();
	}

	function onClickRowTree(){
		var key=$('#searchKey').val();
		loadEmployeeGird(key);
	}
	
	function loadEmployeeGird(key){
		var tree = $('#tree');
		var row = tree.treegrid('getSelected');
		
		if (!row) {
			return;
		}
		var grid = $('#gridEmployee');
		grid.datagrid('loadData', []);
		grid.datagrid('load', { 
			id : row.id,
			key : key
		});
	}
	
	function setEmployee(){
		var grid=$('#gridEmployee');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示','请选择数据!');
			return;
		}
		$('#employeeId').val(row.id);
		$('#employeeName').val(row.name);
		$('#dlgEmployee').dialog('close');
	}
	
	function selectEmployee() {
		$('#dlgEmployee').dialog('open');
	}
	
	function showLeave(){		
		$('#formLeave').form('clear');
				
		var combobox=$('#leaveValue');
		var data= combobox.combobox('getData');
		if(data || data.length>0){
			combobox.combobox('select', data[0].value);
		}
		
		var date=new Date();
		var dateString=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
		$('#leaveStartDate').datebox('setValue', dateString);	
		$('#leaveEndDate').datebox('setValue', dateString);

		$('#dlgLeave').dialog('open');
	}
	
	function saveLeave(){
		var path = '<%=path%>';
		var url = path + '/leave/save/';		
		
		var data='employeeId='+$('#employeeId').val();
		data+='&startDate='+$('#leaveStartDate').datebox('getValue');
		data+='&endDate='+$('#leaveEndDate').datebox('getValue');		
		data+='&value='+$('#leaveValue').combobox('getValue');			
		data+='&reason='+$('#leaveReason').val();
	
		postString($('#dlgLeave'), $('#formLeave'), $('#grid'), url, data);		
	}

	function search(){
		var tree = $('#treeDepartment');
		var row = tree.treegrid('getSelected');		
		if (!row) {
			var root = tree.treegrid('getRoot');
			if (!root) {
				return;
			}
			tree.treegrid('select',root.id);
			row = root;
		}	
		var grid = $('#grid');
		grid.datagrid('load',{
			id : row.id,
			name: $('#searchKey').val(),
			startDate: $('#selectStartDate').datebox('getValue'),
			endDate: $('#selectEndDate').datebox('getValue')
		});
	}

	function del() {
		var grid = $('#grid');
		var entity = grid.datagrid('getSelected');
		if (entity == null) {
			return;
		}

		$.messager.confirm('询问', '确定要删除这条记录吗?', function(r) {
			if (!r) {
				return;
			}

			var path = "${pageContext.request.contextPath}";
			var url = path + '/leave/delete/';
			$.ajax({
				type : "POST",
				url : url,
				data : "employeeId=" + entity.employeeId + '&start=' + entity.startDay + '&end=' + entity.endDay,
				success : function(data) {
					$('#grid').datagrid('reload');
				}
			});
		});
	}
	
	function setNowDate() {
		var date = new Date();
		date.setDate(1);
		$('#selectStartDate').datebox('setValue', date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
		date.setMonth(date.getMonth() + 1);
		date.setDate(date.getDate() - 1);
		$('#selectEndDate').datebox('setValue', date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
	}
	
	$(function(){
		setNowDate();
	});
</script>
</head>
<body class="easyui-layout">

	<!-- 导入 -->
	<div id="dlgImport" class="easyui-dialog" title="导入"
		style="width:680px;height:420px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						saveAll();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgImport').dialog('close');
					}
				}]
			">
		<table id="gridImport" class="easyui-datagrid"
			data-options="
			remoteSort: false,
			idField: 'id',
			fit: true,
			singleSelect: true,
			collapsible: true,
			rownumbers: true,
			showFooter: true,
			striped: true
			">
			<thead>
				<tr>
					<th data-options="field:'employeeCode',width:80">员工编号</th>
					<th data-options="field:'employeeName',width:80">员工姓名</th>
					<th data-options="field:'value',width:60">请假类型</th>
					<th data-options="field:'startDay',width:80,formatter:formatDate">开始日期</th>
					<th data-options="field:'endDay',width:80,formatter:formatDate">结束日期</th>
					<th data-options="field:'reason',width:220">原因</th>
				</tr>
			</thead>
		</table>
	</div>

	<!-- 上传-->
	<div id="dlgUpload" class="easyui-dialog" title="上传文件"
		style="width:320px;height:150px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						uploadData();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgUpload').dialog('close');
					}
				}]
			">
		<form id="formUpload" method="post" enctype="multipart/form-data">
			<table>
				<tr>
					<td>文件:</td>
					<td><input name="filedata" type="file" /></td>
				</tr>
			</table>
		</form>
		<a href="<%=path%>/data/leave.xls" class="easyui-linkbutton"
			iconCls="icon-add" plain="true">模板下载</a> <a
			href="<%=path%>/data/leaveList.xls" class="easyui-linkbutton"
			iconCls="icon-add" plain="true">范例下载</a>
	</div>

	<!-- 选择员工窗體 -->
	<div id="dlgEmployee" class="easyui-dialog" title="选择员工"
		style="width:680px;height:400px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						setEmployee();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgEmployee').dialog('close');
					}
				}]
			">
		<div class="easyui-layout" data-options="fit:true">
			<!-- 部门 -->
			<div data-options="region:'west',split:true" style="width:160px;">
				<table id="tree" class="easyui-treegrid"
					data-options="
				fit:true,
				url: '<%=path%>/department/loadAll',
				idField: 'id',
				treeField: 'name',
				onLoadSuccess: onLoadSuccessTree,
				onClickRow: onClickRowTree,
				queryParams:{id:2}
			">
					<thead>
						<tr>
							<th data-options="field:'name'" width="140">部门名称</th>
						</tr>
					</thead>
				</table>
			</div>

			<!-- 选择员工工具栏 -->
			<div id="tbEmployee" style="height:auto">
				检索条件: <input class="easyui-validatebox" type="text" id="searchKey"
					onchange="loadEmployeeGird(this.value)"
					data-options="required:false" />
			</div>
			<div data-options="region:'center'">
				<table id="gridEmployee" class="easyui-datagrid"
					data-options="
			sortOrder:'desc',
			sortName:'employeeCode',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/employee/loadAll/',
			toolbar:'#tbEmployee',
			striped: true,
			rownumbers:true">
					<thead>
						<tr>
							<th data-options="field:'employeeCode',width:160,sortable:true">工号</th>
							<th data-options="field:'name',width:180,sortable:true">姓名</th>
						</tr>
					</thead>
				</table>

			</div>
		</div>
	</div>

	<!-- 添加请假窗體 -->
	<div id="dlgLeave" class="easyui-dialog" title="添加请假"
		style="width:290px;height:240px;padding:5px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						saveLeave();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgLeave').dialog('close');
					}
				}]
			">
		<form id="formLeave" method="post">
			<table>
				<tr>
					<td>员工:</td>
					<td><input id="employeeId" name="employeeId"
						class="easyui-validatebox" type="hidden" /> <input
						id="employeeName" class="easyui-validatebox" type="text"
						onclick="selectEmployee()" data-options="required:false"
						readonly="readonly" /> <a href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-add',plain:true,iconAlign:'left'"
						onclick="selectEmployee()"></a>
					</td>
				</tr>
				<tr>
					<td>日期 从:</td>
					<td><input id="leaveStartDate" data-options="required:true"
						class="easyui-datebox" type="text" /></td>
				</tr>
				<tr>
					<td>到:</td>
					<td><input id="leaveEndDate" data-options="required:true"
						class="easyui-datebox" type="text" /></td>
				</tr>
				<tr>
					<td>类型:</td>
					<td><input class="easyui-combobox" readonly="readonly"
						id="leaveValue"
						data-options="
					url:'<%=path%>/datamap/loadAll/',
					required: true,
					editable: false,
					valueField:'value',
					textField:'value',
					panelHeight:'auto'
					" />
					</td>
				</tr>

				<tr>
					<td>原因:</td>
					<td><input id="leaveReason" data-options="required:false"
						class="easyui-validatebox" type="text" />
					</td>
				</tr>

			</table>
		</form>
	</div>

	<!-- 部门 -->
	<div data-options="region:'west',split:true" style="width:160px;">
		<table id="treeDepartment" class="easyui-treegrid"
			data-options="
				fit:true,
				url: '<%=path%>/department/loadAll',
				idField: 'id',
				treeField: 'name',
				onLoadSuccess: search,
				onClickRow: search,
				queryParams:{id:2}
			">
			<thead>
				<tr>
					<th data-options="field:'name'" width="140">部门名称</th>
				</tr>
			</thead>
		</table>
	</div>

	<!-- 工具栏 -->
	<div id="tb" style="height:auto">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="showLeave()">添加</a> <a href="#" class="easyui-linkbutton"
				iconCls="icon-remove" plain="true" onclick="del()">删除</a> <a
				href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="showUpload()">导入</a>
		</div>
		<div>
			录入时间从： <input id="selectStartDate" class="easyui-datebox"
				data-options="onSelect:search" /> 到： <input id="selectEndDate"
				class="easyui-datebox" data-options="onSelect:search" /> 检索条件: <input
				class="easyui-validatebox" type="text" id="searchKey"
				onchange="search()" data-options="required:false" />
		</div>
	</div>


	<div data-options="region:'center'">
		<table id="grid" class="easyui-datagrid"
			data-options="
			sortOrder:'desc',
			sortName:'date',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/leave/loadAll/',
			toolbar:'#tb',
			striped: true,
			pageSize:20,
			pagination:true,
			fitColumns:false,
			rownumbers:true
			">
			<thead>
				<tr>
					<th data-options="field:'departmentName',width:100,align:'left'">部门</th>
					<th data-options="field:'employeeCode',width:100,align:'left'">工号</th>
					<th data-options="field:'employeeName',width:100,align:'left'">姓名</th>
					<th data-options="field:'value',width:120,align:'left'">请假类型</th>
					<th
						data-options="field:'date',width:120,align:'left',formatter:formatDate">录入日期</th>
					<th
						data-options="field:'startDay',width:120,align:'left',formatter:formatDate">请假开始日期</th>
					<th
						data-options="field:'endDay',width:120,align:'left',formatter:formatDate">请假结束日期</th>
					<th data-options="field:'day',width:120,align:'left'">天数</th>
					<th data-options="field:'reason',width:200,align:'left',fixed:true">原因</th>

				</tr>
			</thead>

		</table>

	</div>
</body>
</html>